import React, { Component } from 'react';
import { connect } from 'dva';
import { Card } from 'antd';
import moment from 'moment';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import DescriptionList from '../../../components/DescriptionList';

const { Description } = DescriptionList;

@connect(state => ({
  queryInfo: state.vregionnetwork.queryInfo,
}))
export default class VRegionNetworkDetails extends Component {
  componentDidMount() {
    const { dispatch, match } = this.props;
    const { params } = match;
    const { id } = params;
    dispatch({
      type: 'vregionnetwork/query',
      payload: id,
    });
  }

  render() {
    const { queryInfo } = this.props;
    const { name } = queryInfo;

    return (
      <PageHeaderLayout title="VRegionNetwork信息">
        <Card bordered={false}>
          <DescriptionList size="large" col={2} title={name} style={{ marginBottom: 32 }}>
            <Description term="id">{queryInfo.id}</Description>
            <Description term="name">{queryInfo.name}</Description>
            <Description term="description">{queryInfo.description}</Description>
            <Description term="adminStateUp">{queryInfo.adminStateUp}</Description>
            <Description term="portSecurityEnabled">{queryInfo.portSecurityEnabled}</Description>
            <Description term="projectId">{queryInfo.projectId}</Description>
            <Description term="providerNetworkType">{queryInfo.providerNetworkType}</Description>
            <Description term="providerPhysicalNetwork">{queryInfo.providerPhysicalNetwork}</Description>
            <Description term="providerSegmentationId">{queryInfo.providerSegmentationId}</Description>
            <Description term="qosPolicyId">{queryInfo.qosPolicyId}</Description>
            <Description term="dnsDomain">{queryInfo.dnsDomain}</Description>
            <Description term="routerExternal">{queryInfo.routerExternal}</Description>
            <Description term="segments">{queryInfo.segments}</Description>
            <Description term="shared">{queryInfo.shared}</Description>
            <Description term="vlanTransparent">{queryInfo.vlanTransparent}</Description>
            <Description term="mtu">{queryInfo.mtu}</Description>
            <Description term="regionType">{queryInfo.regionType}</Description>
            <Description term="regionId">{queryInfo.regionId}</Description>
            <Description term="activeControllerList">{queryInfo.activeControllerList}</Description>
            <Description term="createTime">{moment(queryInfo.createTime).format('YYYY-MM-DD HH:mm:ss')}</Description>
            <Description term="updateTime">{moment(queryInfo.updateTime).format('YYYY-MM-DD HH:mm:ss')}</Description>
          </DescriptionList>
        </Card>
      </PageHeaderLayout>
    );
  }
}
